<template>
  <Modal
    v-model="isShow"
    title="注册账号"
    :closable="false"
  >
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
      <FormItem label="Username" prop="username">
        <Input v-model="formValidate.username" placeholder="请输入您的用户名" />
      </FormItem>
      <FormItem label="Email" prop="email">
        <Input v-model="formValidate.email" placeholder="邮箱一旦注册将无法修改，请慎重填写" />
      </FormItem>
      <FormItem label="Password" prop="password">
        <Input v-model="formValidate.password" type="password" placeholder="请输入登录密码" />
      </FormItem>
      <FormItem label="Password" prop="password2">
        <Input v-model="formValidate.password2" type="password" placeholder="重复一遍密码" />
      </FormItem>
      <FormItem label="RegCode" prop="regCode">
        <Input v-model="formValidate.regCode" placeholder="注册码" />
      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="primary" @click="handleSubmit('formValidate')">注册</Button>
      <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
      <Button @click="setVisiable(false)" style="margin-left: 8px">关闭</Button>
    </div>
  </Modal>
</template>
<script>
import { regist, usernameExists, emailExists } from '../api/auth'
export default {
  name: 'Regist',
  props: {
    isShow: {
      type: Boolean,
      required: true,
      default: false
    },
    setVisiable: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      formValidate: {
        username: '',
        email: '',
        password: '',
        password2: '',
        regCode: ''
      },
      ruleValidate: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { type: 'string', min: 5, max: 32, message: '用户名必须由5-32位字母或数字组成', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              usernameExists(value)
                .then(res => {
                  callback()
                })
                .catch((err) => {
                  if (err.response) {
                    callback(new Error(err.response.data.message))
                  } else {
                    callback(err)
                  }
                })
            },
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              emailExists(value)
                .then(res => {
                  callback()
                })
                .catch((err) => {
                  if (err.response) {
                    callback(new Error(err.response.data.message))
                  } else {
                    callback(err)
                  }
                })
            },
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { type: 'string', min: 5, max: 32, message: '密码必须由5-32位字母或数字组成', trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { type: 'string', min: 5, max: 32, message: '密码必须由5-32位字母或数字组成', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (this.validatePassword()) {
                callback()
              } else {
                callback(new Error('两次密码输入不一致'))
              }
            }
          }
        ],
        regCode: [
          { required: true, message: '注册码为必填字段', trigger: 'blur' },
          { type: 'string', min: 24, max: 24, message: '注册码长度不对', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ok () {
      this.$Message.info('Clicked ok')
    },
    cancel () {
      this.setVisiable(false)
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // console.log(this.formValidate)
          regist(this.formValidate)
            .then(res => {
              this.$Notice.success({
                title: res.data,
                desc: '本页面将于3秒后自动关闭',
                duration: 5
              })
              setTimeout(() => {
                this.setVisiable(false)
              }, 3000)
            })
            .catch(err => {
              this.$Notice.error({
                title: '注册失败',
                desc: err.response.data.message,
                duration: 5
              })
            })
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    validatePassword () {
      return this.formValidate.password === this.formValidate.password2
    }
  }
}
</script>
